<template>
    <view class="signInDetailPage">
        <view class="consultantBox">
            <view class="consultantBox_title">
                <view class="consultantBox_title_border" />
                <view class="consultantBox_title_text"
                    ><u-text color="#333" size="34rpx" bold text="会议详情"
                /></view>
            </view>
        </view>
        <view v-if="metting.picture">
            <u-image
                height="378rpx"
                width="694rpx"
                :src="metting.picture"
                mode="aspectFill"
                radius="12rpx"
            />
            <u-gap height="20rpx" />
        </view>
        <view
            class="person_box"
            hover-class="person_box_hoverClass"
            @click="toCard"
        >
            <view class="person_box_left_text">
                <u-text
                    :text="metting.salesmanName"
                    size="40rpx"
                    bold
                    color="#333"
                />
                <u-text
                    :text="metting.postName"
                    size="26rpx"
                    bold
                    color="#666666"
                />
            </view>
            <view class="person_box_left">
                <u-image
                    width="90rpx"
                    height="90rpx"
                    :src="
                        metting.avatar ||
                        'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/b78dfa7ff5bb49da8c83e7cd11f9859c.png'
                    "
                    shape="circle"
                ></u-image>
                <u-icon name="arrow-right" size="30rpx" color="#588BF3" />
            </view>
        </view>

        <view class="detail">
            <view class="detail_title">
                <u-text text="会议主题" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text
                    :text="metting.theme || '-'"
                    color="#333"
                    size="40rpx"
                    bold
                />
            </view>
            <view class="detail_title">
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text text="讲师" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text :text="metting.lecturer" color="#333" size="28rpx" />
            </view>
            <!-- <view class="detail_title">
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text text="主办方" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text
                    :text="metting.organizer || '-'"
                    color="#333"
                    size="28rpx"
                />
            </view>
            <view class="detail_title">
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text text="负责人" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text
                    :text="`${metting.organizerPerson}(${metting.organizerPhone})`"
                    color="#333"
                    size="28rpx"
                />
            </view> -->
            <view class="detail_time">
                <u-text text="时间" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text
                    color="#333"
                    size="28rpx"
                    :text="`${
                        (metting &&
                            $u.timeFormat(
                                metting.startTime,
                                'yyyy/mm/dd hh:MM'
                            )) ||
                        '-'
                    } - ${
                        (metting &&
                            $u.timeFormat(
                                metting.endTime,
                                'yyyy/mm/dd hh:MM'
                            )) ||
                        '-'
                    }`"
                />
            </view>
            <view class="detail_address">
                <u-text text="地点" color="#666" size="26rpx" />
                <u-gap height="10rpx" bgColor="#FFF" />
                <u-text
                    :text="`${metting.addressName || ''}${metting.address}`"
                    color="#333"
                    size="28rpx"
                    bold
                />
            </view>
        </view>
        <view class="signButton">
            <u-text
                align="center"
                text="已报名"
                size="36rpx"
                space="10rpx"
                color="#000"
                width="48rpx"
                height="48rpx"
                prefixIcon="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/4c08432224cc4ce0a2cc467dfdca5638.png"
                :iconStyle="iconStyle"
            />
        </view>
    </view>
</template>

<script>
import { useRequest } from "@/js_sdk/tla-useRequest/useRequest.js";
import getphonenumber from "@/components/getphonenumber/getphonenumber.vue";
import {
    getMeetingWithSalesMan2,
    CustomerMeetingSignIn,
    getMeetingWithMeetId,
    getCustomerSignUp,
} from "@/api/sign_in.js";
import { getCustomerIdBySalesmanId } from "@/api/card";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            iconStyle: {
                width: "48rpx",
                height: "48rpx",
                marginRight: "20rpx",
            },
            metting: {},
        };
    },
    computed: {
        ...mapGetters(["userInfo", "phone"]),
    },
    components: {
        getphonenumber,
    },
    onLoad(option) {
        this.customerSignUpId = option.customerSignUpId;
        this.getMeetingDetail(this.customerSignUpId);
    },
    methods: {
        async getMeetingDetail(customerSignUpId) {
            //会议详情
            const res = await getCustomerSignUp(customerSignUpId);
            this.metting = res;
        },

        async toCard() {
            const { data, code } = await getCustomerIdBySalesmanId(
                this.metting.salesManId
            );
            console.log("e", data);
            const that = this;
            uni.$u.route({
                type: "redirectTo",
                url: "pages_card/user_card/index",
                params: {
                    salesmanId: that.metting.salesManId,
                    customerId: data,
                },
            });
        },
        tips(meesage, type, colorbg) {
            this.$refs.uNotify.show({
                top: 0,
                type: type,
                color: "#FFF",
                // bgColor: '#588bf3',
                message: meesage,
                duration: 2000,
                fontSize: "28rpx",
                safeAreaInsetTop: false,
            });
        },
    },
};
</script>

<style lang="scss">
.signInDetailPage {
    background-color: #fff;
    height: 100vh;
    padding: 40rpx 28rpx;
    box-sizing: border-box;

    .consultantBox {
        padding-bottom: 18rpx;

        &_title {
            display: flex;
            align-items: center;

            &_border {
                width: 10rpx;
                background-color: $uni-color-primary;
                height: 32rpx;
            }

            &_text {
                padding-left: 24rpx;
            }
        }
    }

    .person_box_hoverClass {
        transition: 0.05s;
        opacity: 0.7;
    }

    .person_box {
        display: flex;
        width: 100%;
        // height: 146rpx;
        background: linear-gradient(
            135deg,
            #deebf9 0%,
            rgba(255, 255, 255, 0) 100%
        );
        justify-content: space-between;
        padding: 22rpx 20rpx;
        box-sizing: border-box;
        align-items: center;

        &_left {
            display: flex;
            align-items: center;

            &_text {
                margin-left: 12rpx;
            }
        }
    }

    .detail {
        width: 100%;
        padding: 0 12rpx;
        box-sizing: border-box;
        margin-top: 32rpx;

        &_title {
            width: 100%;
            padding: 0 0 24rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
        }

        &_time {
            padding: 24rpx 0;
            border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
        }

        &_address {
            padding: 24rpx 0;
        }
    }

    .signButton {
        width: 100%;
        margin-top: 10rpx;
    }
}
</style>
